<ion-header translucent="true">
  <ion-toolbar>
    @if (!showSearchbar) {
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    } @if(ios) {
    <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
      <ion-segment-button value="all"> All </ion-segment-button>
      <ion-segment-button value="favorites"> Favorites </ion-segment-button>
    </ion-segment>
    } @if (!ios && !showSearchbar) {
    <ion-title>Schedule</ion-title>
    } @if (showSearchbar) {
    <ion-searchbar
      showCancelButton="always"
      [(ngModel)]="queryText"
      (ionInput)="updateSchedule()"
      (ionCancel)="showSearchbar = false"
      placeholder="Search"
    ></ion-searchbar>
    }
    <ion-buttons slot="end">
      @if (!ios && !showSearchbar) {
      <ion-button (click)="showSearchbar = true">
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
      } @if (!showSearchbar) {
      <ion-button (click)="presentFilter()">
        @if (ios) {
        <span>Filter</span>
        } @else {
        <span>
          <ion-icon slot="icon-only" name="options"></ion-icon>
        </span>
        }
      </ion-button>
      }
    </ion-buttons>
  </ion-toolbar>
  @if (!ios) {
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
      <ion-segment-button value="all"> All </ion-segment-button>
      <ion-segment-button value="favorites"> Favorites </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
  }
</ion-header>

<ion-content fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Schedule</ion-title>
    </ion-toolbar>
    <ion-toolbar>
      <ion-searchbar
        [(ngModel)]="queryText"
        (ionInput)="updateSchedule()"
        placeholder="Search"
      ></ion-searchbar>
    </ion-toolbar>
  </ion-header>

  <ion-list #scheduleList [hidden]="shownSessions === 0">
    @for (group of groups; track $index) {
    <ion-item-group [hidden]="group.hide">
      <ion-item-divider sticky>
        <ion-label> {{group.time}} </ion-label>
      </ion-item-divider>

      @for (session of group.sessions; track session.id) {
      <ion-item-sliding
        #slidingItem
        [attr.track]="session.tracks[0] | lowercase"
        [hidden]="session.hide"
      >
        <ion-item routerLink="/app/tabs/schedule/session/{{session.id}}">
          <ion-label>
            <h3>{{session.name}}</h3>
            <p>
              {{session.timeStart}} &mdash; {{session.timeEnd}}:
              {{session.location}}
            </p>
          </ion-label>
        </ion-item>
        <ion-item-options>
          @if (segment === 'all') {
          <ion-item-option
            color="favorite"
            (click)="addFavorite(slidingItem, session)"
          >
            Favorite
          </ion-item-option>
          } @if (segment === 'favorites') {
          <ion-item-option
            color="danger"
            (click)="removeFavorite(slidingItem, session, 'Remove Favorite')"
          >
            Remove
          </ion-item-option>
          }
        </ion-item-options>
      </ion-item-sliding>
      }
    </ion-item-group>
    }
  </ion-list>

  <ion-list-header [hidden]="shownSessions > 0">
    No Sessions Found
  </ion-list-header>

  <ion-fab slot="fixed" vertical="bottom" horizontal="end" #fab>
    <ion-fab-button>
      <ion-icon name="share-social"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button color="vimeo" (click)="openSocial('Vimeo', fab)">
        <ion-icon name="logo-vimeo"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="instagram" (click)="openSocial('Instagram', fab)">
        <ion-icon name="logo-instagram"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="twitter" (click)="openSocial('Twitter', fab)">
        <ion-icon name="logo-twitter"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="facebook" (click)="openSocial('Facebook', fab)">
        <ion-icon name="logo-facebook"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>
